/**
 * Demonstrates usage of a border layout.
 * KitchenSink.view.layout.Border -> com.wxg.varietyStore.Border
 *
 * Ext.layout.container.Border
 *		+ <http://docs.sencha.com/extjs/6.2.0/classic/Ext.layout.container.Border.html>
 * Ext.Panel
 *		+ <http://docs.sencha.com/extjs/6.2.0/modern/Ext.Panel.html>
 *		+ <http://docs.sencha.com/extjs/6.2.0/classic/Ext.panel.Panel.html>
			- 在这个链接中能够找到 `header`, `collapsible`, `collapsed`
 */
Ext.define('com.wxg.varietyStore.Border', {
    extend: 'Ext.panel.Panel',
    xtype: 'varietyStore_layout_border',
	/*
	 * 因为并没有按照Ext6提供的方式构建应用，所有，require并不需要。
	 */
    /*requires: [
        'Ext.layout.container.Border'
    ],*/
    layout: 'border',
    width: '100%', //'100%', //500,
    height: '100%', //'100%', //400,

    bodyBorder: false,

    defaults: {
        collapsible: false,
        split: false,
        bodyPadding: 10
    },

    items: [
		{
            //title: '',
			header: false,
            region: 'north',
			xtype: 'panel',
            height: 50,
            minHeight: 75,
            maxHeight: 150,
            html: '<p>North content</p>'
        },
        {
            title: 'Footer',
            region: 'south',
            height: 100,
            minHeight: 75,
            maxHeight: 150,
            html: '<p>Footer content</p>'
        },
        {
            title: 'Navigation',
            region:'west',
			split: true,
            floatable: false,
            margin: '5 0 0 0',
            width: 200,
            minWidth: 100,
            maxWidth: 250,
            html: '<p>Secondary content like navigation links could go here</p>'
        },
        {
            title: 'Main Content',
            collapsible: false,
            region: 'center',
            margin: '5 0 0 0',
            html: '<h2>Main Page</h2><p>This is where the main content would go</p>'
        }
    ]

});




/**
 * 从控制台的输出就可以得知: 使用"viewport"是多么的必要!
 * 		+ 这样做是有点取巧的成分: 让extjs来帮我们确定高度。
 */
Ext.onReady(function(){
	Ext.themeName = 'classic';

	var viewport = Ext.create({
		xtype: 'viewport',
		layout: 'fit',
		items: [
			{
				xtype: 'varietyStore_layout_border',
				width: document.body.clientWidth,
				height: document.body.clientHeight,
			}
		]
	});

});